<template>
  <div class="user-list">
    <div class="content-head" style="margin-bottom: 20px;">
      <div class="sort-keys">
        <div class="tab-list">
           <div class="item" @click="keys.type = item.key" :class="{actived: keys.type === item.key}"
             v-for="(item, index) in statusList">
             {{item.text}}
             ({{statusTotal[item.key]}})
           </div>
         </div>
        <a-input
          placeholder="输入关键字"
          style="width: 180px;margin-right:10px;"
          v-model="key"
          allowClear
          @input="onSearch"
        />
        <span style="margin-left: 20px; margin-right: 6px;">企业群:</span>
        <a-select style="width: 250px;margin-right:10px;" v-model="qy_group_id" placeholder="企业群" allowClear>
          <a-select-option :value="item.id" v-for="item in qy_group_list" :key="item.id">{{ item.title }}</a-select-option>
        </a-select>
        <span style="margin-left: 20px; margin-right: 6px;">注册日期:</span>
        <iDatePicker :showTime="false" style="margin-left: 10px;" placeholder="不选则不限制" v-model="filter.min_day"></iDatePicker>
        至
        <iDatePicker :showTime="false" style="margin-left: 0px;" placeholder="不选则不限制" v-model="filter.max_day"></iDatePicker>
        <a-button type="primary" @click="refresh" style="margin-right:10px;">刷新</a-button>
      </div>
    </div>
    <a-table
      class="table"
      :rowKey="row => row.uuid"
      :dataSource="list"
      :pagination="pagination"
      @change="onPaginationChange"
    >
      <a-table-column
        title="姓名"
        key="name"
        width="230px"
      >
        <template slot-scope="row">
          <div class="user">
            <img class="headimg" :src="row.headimg" alt="用户头像">

            <div class='right'>
              <div class="top">
                <span>{{ row.name }}</span>
                <a-icon class="gender-man" v-if="row.gender==='男'" type="man" />
                <a-icon class="gender-woman" v-else-if="row.gender==='女'" type="woman" />
              </div>
              <div class="bottom" style="margin-top: 4px;">
                <span>{{row.phone}}</span>
                <a-tag color="red" style="margin-left:10px;" v-if="row.status === 2">已拉黑</a-tag>
                <a-tag color="red" style="margin-left:10px;" v-if="row.is_nopay === 1">禁付</a-tag>
                <div v-if="action_show">
                <a-tag color="red" style="margin-left:10px;" v-if="row.is_rb === 1">马甲</a-tag>
                <a-tag color="red" style="margin-left:10px;" v-if="row.is_rb2 === 1">主播</a-tag>
                <a-tag color="red" style="margin-left:10px;" v-if="row.is_liu === 1">老六</a-tag>
                <a-tag color="red" style="margin-left:10px;" v-if="row.is_liu === 1">老六</a-tag>
                <a-tag color="blue" style="margin-left:10px;" v-if="!row.adv_app_log">小程序</a-tag>
                <a-tag color="blue" style="margin-left:10px;" v-else-if="row.adv_app_log.device_type == 'ios'">ios</a-tag>
                <a-tag color="blue" style="margin-left:10px;" v-else>android</a-tag>
                </div>
              </div>
              <span v-if="action_show">{{ row.remark }}</span>
            </div>
          </div>
        </template>
      </a-table-column>

      <a-table-column title="微信群" width="80px" v-if="action_show">
        <template slot-scope="row">
          <a-tag style="margin-left:10px;" v-for="(item, index) in row.qy_groups">{{item}}</a-tag>
        </template>
      </a-table-column>

      <a-table-column title="额外扩展" width="280px">
        <template slot-scope="row">
          <div v-if="row.qy_kz">
          <li :key="index" v-for="(item, index) in row.qy_kz">
            <a-tag>{{ item.chat_name }}</a-tag>
            <span>退出{{ item.del_count }}次</span>
          </li>
          </div>
        </template>
      </a-table-column>


      <a-table-column title="成长等级" width="80px" v-if="action_show">
        <template slot-scope="row">{{row.task_level}}级
        </template>
      </a-table-column>
      <!-- <a-table-column
        title="邀请数"
        width="70px"
      >
        <template slot-scope="row">
          <div>{{row.invitees_count}}人</div>
        </template>
      </a-table-column> -->
      <a-table-column
        title="首单购买时间"
        key="sd_created_at"
        width="110px"
      >
        <template slot-scope="row">
          <span>{{ row.sd_created_at | formatDate2}}</span>
        </template>
      </a-table-column>
      <a-table-column
        title="实付总金额"
        key="paidtotal"
        width="180px"
        v-if="action_show"
      >
        <template slot-scope="row">
          <div>总:{{row.paidtotal / 100}}元</div>
          <div>抽/充:{{row.paidtotal2 / 100}}元</div>
          <div>转/提:{{row.paidtotal3 / 100}}元</div>
          <div>库退:{{row.paidtotal4 / 100}}元</div>
        </template>
      </a-table-column>
      <a-table-column
        title="注册日期"
        dataIndex="created_at"
        key="created_at"
        width="110px"
      >
        <template slot-scope="created_at">
          <span>{{ created_at | formatDate2 }}</span>
        </template>
      </a-table-column>
      <a-table-column
        title="最后活跃"
        dataIndex="last_active_at"
        key="last_active_at"
        width="100px"
      >
        <template slot-scope="last_active_at">
          <span>{{ last_active_at | formatDate }}</span>
        </template>
      </a-table-column>
    </a-table>

  </div>

</template>
<script>
import { getUserList, updateUser } from '@/api/users'
import moment from 'moment'
import IDatePicker from "@/components/IDatePicker/IDatePicker.vue"

export default {
  name: 'UserList',
  components: {
    IDatePicker,
  },
  data () {
    return {
      action_show : false,
      isIpLog: false,
      isMxLog: false,
      user_id: 0,
      qy_group_id: '',
      qy_group_list: [],
      statusList: [
        {
          text: '已入群',
          key: 'in_external'
        },
        {
          text: '实付>200未入群',
          key: 'no_external'
        },
      ],
      keys: {
        type: 'in_external'
      },
      statusTotal: {
        in_external: 0,
        no_external: 0,
      },
      loading: false,
      list: [],
      page: 1,
      per_page: 10,
      total: 0,
      key: '',
      aid: '',
      sort: 'time',
      form: this.$form.createForm(this),
      visible: false,
      confirmLoading: false,
      timeout: null,
      isExport: false,
      isExport2: false,
      adq_text: '',
      filter: {
        min_day: '',
        max_day: ''
      }
    }
  },
  computed: {
    pagination () {
      return {
        defaultPageSize: this.per_page,
        defaultCurrent: this.page,
        total: this.total,
        showTotal: total => `共 ${total} 条`
      }
    }
  },
  filters: {
    formatDate (value) {
      return value ? moment(value).fromNow() : ''
    },
    formatDate2 (value) {
      return value ? moment(value).format('YYYY-MM-DD HH:mm') : ''
    },
 
  },
  created () {
    this.action_show = this.$authCheck('Users_lb5');
    this.fetchData()
    this.fetchTotalData()
    this.$http.get('/qy-group',{
        params: {
          per_page: 100,
          as_list: 1,
        }
      }).then(res => {
      this.qy_group_list = res.data.list
      this.qy_group_list = this.qy_group_list.map(item => {
        return {
          title: item.chat_name,
          id: item.id
        }
      })
    })
  },
  watch: {
    sort(val) {
      this.fetchData()
    },
    keys: {
      handler(value) {
        this.refresh()
      },
      deep: true
    },
    'filter.min_day'() {
      this.refresh()
    },
    'filter.max_day'() {
      this.refresh()
    }
  },
  methods: {
    handleIpLog(user_id){
      this.isIpLog = true;
      this.user_id = user_id;
    },
    handleMxLog(user_id){
      this.isMxLog = true;
      this.user_id = user_id;
    },
    onPaginationChange (e) {
      this.page = e.current
      this.per_page = e.pageSize
      this.fetchData()
    },
    refresh () {
      this.page = 1
      this.fetchData()
      this.fetchTotalData()
    },
    onSearch (e) {
      this.page = 1
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.fetchData()
      }, 300)
    },
    
    fetchTotalData() {
      this.$http('/status-total/user2').then((res) => {
        this.statusTotal = res.data.total
      })
    },
    fetchData () {
      this.loading = true
      getUserList({
        page: this.page,
        per_page: this.per_page,
        key: this.key,
        aid: this.aid,
        sort: this.sort,
        type: this.keys.type,
        created_start_at: this.filter.min_day,
        created_end_at: this.filter.max_day,
        qy_group_id: this.qy_group_id,
      }).then(res => {
        this.list = res.data.list
        this.total = res.data.item_total
        console.log(this.list)
      }).finally(() => {
        this.loading = false
      })
    },
  }
}
</script>
<style lang="less" scoped>

  .marked-tag {
    border-radius: 50px;
    border: 1px solid #666;
    font-size: 10px;
    padding: 1px 6px;
    color: #666;
    cursor: pointer;
    margin-right: 6px;

    &.actived {
      background: #666;
      color: white;
    }
  }


  .sort-keys {
    display: flex;
    align-items: center;

    .tab-list {
      display: flex;
      margin-top: 6px;
      border-bottom: 1px solid #e1e1e1;
      margin-right: 50px;

      .item {
        margin-right: 30px;
        padding: 0px 10px 4px 10px;
        cursor: pointer;
        font-weight: 500;

        &.actived {
          color: #1890FF;
          border-bottom: 3px solid #1890FF;
        }

        &:hover {
          color: #1890FF;
        }
      }
    }

  }

.inviter-headimg {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.content-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.table {
  background-color: #fff;
  .user {
    display: flex;
    // flex-wrap: wrap;
    align-items: center;
    img {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      border: 1px solid #e1e1e1;
      margin-right: 6px;
      border-radius: 50%;
      overflow: hidden;
    }
    .gender-man, .gender-woman {
      margin-left: 5px;
      font-size: 12px;
    }
    .gender-man {
      color: #409EFF;
    }
    .gender-woman {
      color: #F56C6C;
    }
  }
}
</style>
